<template>
	<view class="install-container" style="margin-bottom: 30rpx;">
	
		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			<uni-forms-item label="分区编号：" name="分区编号">
				<input maxlength="50" placeholder="请输入分区编号" v-model="params['分区编号']">
			</uni-forms-item>
			<uni-forms-item required label="分区名称：" name="分区名称">
				<input maxlength="18" v-model="params['分区名称']" placeholder="请输入分区名称" @input="binddata('分区名称',$event.detail.value)" >
			</uni-forms-item>
			<button class="grid-btn" @click="submitForm">提交</button>
		</uni-forms>

	</view>
</template>

<script>
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			LbPicker,
			DatePicker 
		},
		data() {
			return {
				params: {
					检查点id	: null,
					分区编号: null,
					分区名称: null
				},
				//表单验证规则
				rules: {
					分区名称: {
						rules: [{
							required: true,
							errorMessage: '请填写分区名称',
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.params.检查点id = +options.id
			// console.log(options)
			// this.params.检查点名称 = options.name
		},
		onShow() {

		},
		methods: {
			submitForm(form) {
				console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					res.检查点id = this.params.检查点id
					if(this.params.分区名称.includes('区')) {
						res.分区名称 = this.params.分区名称.slice(0,this.params.分区名称.length - 1)
					}
					// res.分区名称 = this.params.分区名称.slice(0,this.params.分区名称.length - 1)
					console.log('表单数据信息：', res);
					this.addPartition(res)
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},	
			addPartition(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/partition/create', params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.navigateBack({
							delta: 1
						})
						// uni.showToast({
						// 	title: '新建成功',
						// })
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.install-container {
		height: 100vh;
		background-color: #F8F8F8;
	}
	.color {
		color: #808080;
	}
	.tap {
		display: flex;
		align-items: center;
	}
</style>

